.login_popup {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  .login_box {
    width: 1000px;
    height: 700px;
    background-color: white;
    border-radius: 15px;
    position: fixed;
    left: calc(50% - 500px);
    top: calc(50% - 350px);
    position: relative;
    display: flex;

    .posters {
      width: 350px;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 15px 0px 0px 15px;
      }
    }
    .boxc {
      width: 650px;
      height: 100%;
      border-radius: 0px 15px 15px 0px;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-direction: column;
      .change_type {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: right;
        .type_box {
          width: 220px;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .change_btn {
            width: 130px;
            height: 40px;
            background-color: rgba(42, 113, 255, 0.1);
            color: #2a71ff;
            font-size: 18px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
          }
          .change_img {
            width: 80px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .boxc_main {
        width: 460px;
        height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .change_code {
          width: 100%;
          height: 60px;
          display: flex;
          border: 1px solid #ece9e9;
          border-radius: 10px;
          margin-top: 20px;

          .wx_code_login {
            width: 50%;
            height: 100%;
            font-size: 19px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px 0px 0px 10px;
            .wx_icon {
              color: #45d66b;
              font-size: 25px;
              margin-right: 5px;
            }
          }

          .app_code_login {
            width: 50%;
            height: 100%;
            font-size: 19px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0px 10px 10px 0px;
            .app_icon {
              color: #2a71ff;
              font-size: 25px;
              margin-right: 5px;
            }
          }
          .login_active {
            font-weight: bold;
            background-color: #2a71ff;
            color: white;
            .wx_icon,
            .app_icon {
              color: white;
            }
          }
        }
        .main_text {
          width: 100%;
          height: 50px;
          font-size: 16px;
          color: #acacac;
          text-align: center;
          line-height: 50px;
        }
        .code {
          width: 200px;
          height: 200px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .boxc_main_tel {
        width: 460px;
        height: 320px;
        .title {
          width: 100%;
          height: 40px;
          font-weight: bold;
          font-size: 30px;
        }
        .login_form {
          width: 455px;
          height: 250px;
          .tel_inp_box {
            margin-top: 30px;
            margin-bottom: 20px;
            .tel_space {
              .select_tel {
                width: 80px;
                height: 50px;
                .ant-select-selector {
                  .ant-select-selection-item {
                    font-weight: bold;
                    text-overflow: clip;
                  }
                }
              }
              .inp_tel {
                width: 370px;
                height: 50px;
              }
            }
          }
          .pwd_inp_box {
            margin-bottom: 20px;
            .inp_pwd {
              width: 450px;
              height: 50px;
            }
          }
          .login_btn_box {
            margin-bottom: 20px;
            .login_btn {
              width: 450px;
              height: 50px;
            }
          }
          .login_tool {
            width: 450px;
            height: 50px;
            .ant-form-item-control-input-content {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              .tel_captcha_login {
                color: #2a71ff;
              }
              .forget_pwd {
                color: #6b6b6b;
              }
            }
          }
        }
      }
      .else_login {
        width: 490px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 60px;
        .else_top {
          width: 100%;
          height: 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .line {
            width: 172px;
            border-top: 1px solid #e1dfdf;
          }
          .else_top_text {
            font-size: 15px;
            color: #979797;
          }
        }
        .else_main {
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            width: 50px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .icon {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: #f5f7fa;
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                color: #999999;
              }
            }
            .login_text {
              font-size: 15px;
              white-space: nowrap;
              color: #999999;
            }
          }
          .tel_login:hover {
            span {
              color: #2a71ff;
            }
          }
          .wx_login:hover {
            span {
              color: #45d66b;
            }
          }
        }
      }
      .text {
        width: 580px;
        height: 50px;
        margin-bottom: 30px;
        display: flex;
        margin-top: 40px;
        align-items: center;
        justify-content: space-between;
        .text_text {
          width: 435px;
          height: 100%;
          font-size: 15px;
          color: #999999;
          line-height: 25px;
          > span:hover {
            color: #2a71ff;
          }
        }
        .tel_enroll {
          height: 35px;
          line-height: 40px;
          color: #2a71ff;
          font-size: 16px;
          padding-left: 20px;
          border-left: 1px solid #dedede;
        }
      }
    }
    .close {
      width: 40px;
      height: 40px;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 50%;
      right: -40px;
      top: -40px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 23px;
    }
    .close:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
